<template>
	<view class="wrap">
		<header-det :detId="detId" :cusService="cusService"></header-det>
		<!-- 机构名称 -->
		<ogz-name :cusService="cusService" @goCurrPos="goCurrPos"></ogz-name> 
		<!-- 套餐内容项目 -->
		<service-item 
			:detId="detId" 
			:serviceNum="serviceNum" 
			:cusServiceList="cusServiceList"
			@selectCurrService="selectCurrService"
			@showProMxIntro="showProMxIntro"
		></service-item>
		<!-- 底部购买btn -->
		<bot-btn @goBuy="goBuy" @makePhoneCall="makePhoneCall"></bot-btn>
		<tui-bottom-popup :show="popupShow" @close="hidePopup" :radius="radiusFlag">
			<view class="popuoView">
				<view class="popupTop">{{currServiceName}}</view>
				<view class="popupCon" :class="[currServiceIntro == '暂无介绍' ? 'noData' : '']">{{currServiceIntro}}</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
	import HeaderDet from './components/HeaderDet'
	import OgzName from './components/OgzName'
	import ServiceItem from './components/ServiceItem'
	import BotBtn from './components/BotBtn'
	import { getPkgDetail,getCustomService } from '@/api/group/index'
	export default {
		components:{
			HeaderDet,
			OgzName,
			ServiceItem,
			BotBtn
		},
		data(){
			return{
				popupShow:false,
				radiusFlag:true,
				detId:'',
				ogzId:'',
				cusService:{},
				cusServiceList:[],
				cusServiceIdVal:[],
				longitude:uni.getStorageSync('longitude'),
				latitude:uni.getStorageSync('latitude'),
				serviceNum:0,
				currServiceName:'',
				currServiceIntro:'',
				pkgId:''
			}
		},
		onLoad(options){
			this.detId = options.id;
			this.ogzId = options.ogzId;
			if(this.detId == ''){
				this.loadCustomService();
			}else{
				this.loadPkgDetail();
			}
		},
		methods:{
			makePhoneCall(){
				uni.makePhoneCall({
					phoneNumber:this.cusService.tel
				})
			},
			showProMxIntro(index){
				this.popupShow = true;
				this.currServiceName = this.cusServiceList[index].serviceName;
				this.currServiceIntro = this.cusServiceList[index].serviceProfile == '' ? '暂无介绍' : this.cusServiceList[index].serviceProfile;
			},
			selectCurrService(index,serviceId){
				if(this.detId == ''){
					if(this.cusServiceList[index].selFlag){
						this.cusServiceList[index].selFlag = false;
						for(var i=0;i<this.cusServiceIdVal.length;i++){
							if(serviceId == this.cusServiceIdVal[i]){
								this.cusServiceIdVal.splice(i,1);
							}
						}
					}else if(this.cusServiceList[index].selFlag == false) {
						this.cusServiceList[index].selFlag = true;
						this.cusServiceIdVal.push(this.cusServiceList[index].serviceId)
					}
				}
			},
			//导航至当前位置
			goCurrPos(){
				// var lon = this.cusService.lon,
				// 	lat = this.cusService.lat,
				// 	ogzName = this.cusService.ogzName;
				// this.util.openMapNaviagtion(lon,lat,ogzName);
			},
			//根据套餐id后去其下的所有团体服务项目
			loadPkgDetail(){
				uni.showLoading({title:'加载中...', mask: true });
				var field = { id:this.detId,lon:this.longitude,lat:this.latitude };
				getPkgDetail(field).then(res=>{
					//console.log(res)
					this.cusService = res.data.datas;
					this.serviceNum = res.data.datas.serviceNum;
					this.cusServiceList = res.data.datas.serviceList;
					this.pkgId = res.data.datas.pkgId;
				}).catch(err=>{
					console.log(err)
				});
			},
			//自定义套餐的时候使用 加载所有服务项目
			loadCustomService(){
				uni.showLoading({title:'加载中...', mask: true });
				var field = { ogzId:this.ogzId,lon:this.longitude,lat:this.latitude }
				getCustomService(field).then(res=>{
					//console.log(res)
					this.cusService = res.data.datas;
					this.serviceNum = res.data.datas.serviceNum;
					this.cusServiceList = res.data.datas.serviceList;
				}).catch(err=>{
					console.log(err)
				});
			},
			hidePopup(){
				this.popupShow = false;
			},
			goBuy(){
				if(uni.getStorageSync('userIdPss')){
					if(this.detId != ''){
						for(let i in this.cusServiceList){
							this.cusServiceIdVal.push( this.cusServiceList[i].serviceId );
						}
					}else{//自定义
						if(this.cusServiceIdVal.length == 0){
							this.util.showToast('请选择套餐服务项目');
							return;
						}
						if(this.cusServiceIdVal.length < 3){
							this.util.showToast('套餐服务项目至少选择3项')
							return;
						}
					}
					var pkgId = this.detId == '' ? '' : this.pkgId;
					var serviceIdStr = this.cusServiceIdVal.join(',')
					uni.navigateTo({
						url:'../groupServiceOrder/groupServiceOrder?pkgId=' + pkgId + '&serviceIdStr=' + serviceIdStr
					})
				}else{
					this.util.comNavigateToLogin('userFix');
				}
				
			}
		}
	}
</script>

<style lang='scss'>
	.popuoView{
		position: relative;
		z-index: 10001;
		.popupTop{
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: $font-size32;
			color: $pss-text-color3;
			border-bottom: 1rpx solid #eee;
			font-weight: bold;
		}
		.popupCon{
			padding: 30rpx 30rpx 100rpx;
			font-size: $font-size28;
			color: $pss-text-color8;
			&.noData{
				color: $pss-text-colora;
				text-align: center;
				padding-top: 80rpx;
			}
		}
	}
	.serviceName{
		padding: 0 30rpx;
		background: #fff;
		margin-top: -130rpx;
		position: relative;
		z-index: 2;
		margin-bottom: 20rpx;
		.name{
			height: 90rpx;
			line-height: 90rpx;
			font-size: $font-size32;
			color: $pss-text-color3;
			font-weight: bold;
		}
		.bot{
			font-size: $font-size26;
			color: $pss-text-color3;
			padding-bottom: 30rpx;
			.specCol{
				font-size: $font-size30;
				color: $pss-color-red; 
			}
		}
	}
	.header{
		width: 750rpx;
		/* #ifdef APP-PLUS */
		height: 600rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		height: 480rpx;
		/* #endif */
		background: #20d3a8;
		z-index: 1;
		.innerHeader{
			width: 680rpx;
			height: 400rpx;
			background: rgba(255,255,255,.5);
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 20rpx;
			/* #ifdef APP-PLUS */
			top: 160rpx;
			/* #endif */
			/* #ifdef MP-WEIXIN */
			top: 50rpx;
			/* #endif */
			left: 50%;
			margin-left: -340rpx;
			.smImg{
				width: 585rpx;
				height: 368rpx;
			}
		}
	}
	page{
		background: $pss-bg-primary;
	}
	.wrap{
		padding-bottom: 110rpx;
	}
</style>